<template>
	<view>
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper 
					activeColor="#f29100" 
					ref="tabs" 
					:list="list" 
					:show-bar="showBar"
					:current="current" 
					@change="change" 
					:is-scroll="false" 
					swiperWidth="750">
				</u-tabs-swiper>
			</view>
			<swiper 
				class="swiper-box" 
				:current="swiperCurrent" 
				@transition="transition" 
				@animationfinish="animationfinish"
			>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer ==false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res,index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待付款</view>
									</view>
									
									<view class="item" v-for="(item, index) in res.child" :key="index" @click="goDetail(item.goodsid)">
										<view class="left"><image :src="baseUrl + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{priceDecimal(res.countmoney)}}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view>
										<view class="evaluate btn" @click="goPay(res.ordernumber,res.countmoney)" >立即支付</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
							</block>
							
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer ==false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res, index) in  orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待发货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index"  @click="goDetail(item.goodsid)">
										<view class="left"><image :src="baseUrl + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<view class="logistics btn">继续购买</view>
										<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view>
										<view class="evaluate btn">提醒发货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[1]" bgColor="#f2f2f2"></u-loadmore>
							</block>
							
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<block v-if="dataBuffer == false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res,index) in orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right">待确认</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index"  @click="goDetail(item.goodsid)">
										<view class="left"><image :src="baseUrl + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ res.countmoney }}.
											<text class="decimal">{{priceDecimal(res.countmoney)}}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<view class="exchange btn">继续购买</view>
										<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view>
										<view class="evaluate btn">确认收货</view>
									</view>
								</view>
								<u-loadmore :status="loadStatus[2]" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="page-box">
							<block v-if="dataBuffer ==false">
								<ordernull />
							</block>
							<block v-else>
								<view class="order" v-for="(res, index) in  orderList" :key="index">
									<view class="top">
										<view class="left">
											<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
											<view class="store">编号: {{ res.ordernumber }}</view>
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										<view class="right" v-if="res.status == 0">待支付</view>
										<view class="right" v-else-if="res.status == 1">待发货</view>
										<view class="right" v-else-if="res.status == 2">待收货</view>
									</view>
									<view class="item" v-for="(item, index) in res.child" :key="index"  @click="goDetail(item.goodsid)">
										<view class="left"><image :src="baseUrl + item.img" mode="aspectFill"></image></view>
										<view class="content">
											<view class="title u-line-2">{{ item.goodsname }}</view>
											<view class="type"></view>
											<view class="delivery-time">下单时间 {{res.addtime}}</view>
										</view>
										<view class="right">
											<view class="price">
												￥{{ priceInt(item.price) }}
												<text class="decimal">.{{ priceDecimal(item.price) }}</text>
											</view>
											<view class="number">x{{ item.num }}</view>
										</view>
									</view>
									<view class="total">
										共{{ res.countnumber }}件商品 合计:
										<text class="total-price">
											￥{{ priceInt(res.countmoney) }}.
											<text class="decimal">{{ priceDecimal(res.countmoney) }}</text>
										</text>
									</view>
									<view class="bottom">
										<view class="more"><u-icon name="more-dot-fill" color="rgb(203,203,203)"></u-icon></view>
										<block v-if="res.status ==0">
											<view class="exchange btn">继续购买</view>
											<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view>
											<view class="evaluate btn"  @click="goPay(res.ordernumber,res.countmoney)">立即支付</view>
										</block>
										<block v-else-if="res.status ==1">
											<view class="logistics btn">继续购买</view>
											<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view>
											<view class="evaluate btn">提醒发货</view>
										</block>
										<block v-else-if="res.status ==2">
											<view class="logistics btn">查看物流</view>
											<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view>
											<view class="evaluate btn">确认收货</view>
										</block>
										<block v-else-if="res.status ==5">
<!-- 											<view class="logistics btn">查看物流</view>
											<view class="exchange btn" @click="editOrder(res.id,5)">撤销订单</view> -->
											<view class="evchange btn" @click="editOrder(res.id,0)">重新购买</view>
										</block>	
									</view>
								</view>
								<u-loadmore :status="loadStatus[3]" bgColor="#f2f2f2"></u-loadmore>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>

// 引入订单为空提示组件
import ordernull from '@/components/ordernull/ordernull.vue';

export default {
	components:{ordernull},
	data() {
		return {
			showBar:true,//初始化底部滑块开关
			orderList:[],//初始化订单列表数据
			dataBuffer:true,//数据展示开关
			list: [
				{
					name: '待付款'
				},
				{
					name: '待发货'
				},
				{
					name: '待收货'
				},
				{
					name: '全部订单',
				}
			],
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
			dx: 0,
			loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
			page:1,
			size:2,
			totalPage:1,
			baseUrl:this.$baseUrl
		};
	},
	onLoad(option){
		
		// 兼容百度小程序
		// #ifdef MP-BAIDU
			this.showBar = false;
		// #endif
		
		// 处理不同的订单状态 （默认请求状态是0的数据）
		let status = option.status || 0; 
		// 给轮播图和current赋值
		this.swiperCurrent = status;
		this.current = status;
		
		
		
		this.getList()
		
	},
	computed: {
		// 价格小数
		priceDecimal() {
			return val => {
				if (val !== parseInt(val)) return val.slice(-2);
				else return '00';
			};
		},
		// 价格整数
		priceInt() {
			return val => {
				if (val !== parseInt(val)) return val.split('.')[0];
				else return val;
			};
		}
	},
	methods: {
		// 5.点击进入详情页
		goDetail(id){
			uni.navigateTo({
				url:'../../packagePageA/pages/gooddesc/gooddesc?id=' + id
			})
		},
		// 4.撤销订单
		editOrder(TradeNo,status){
			let content = '';
			switch(status){
				case 0:
					content = '要重新购买?';
					break;
				case 5:
					content = '要取消订单?';
					break;
			}
			
			uni.showModal({
				title:'提示',
				content,
				confirmText:'是',
				cancelText:'否',
				success:async (res) => {
					if(res.confirm){
						
						console.log(
							{
								id:TradeNo,
								couriernumber:'',
								couriercode:'',
								status,
							}
						);
						let res = await this.$http({
							url:'orderedit',
							method:'post',
							header:{
								"content-type":"application/json",
								"authorization":uni.getStorageSync('userInfo').token || null
							},
							data:{
								id:TradeNo,
								couriernumber:'',
								couriercode:'',
								status,
							}
						})
						console.log(res);
						if(res.data.code == 200){
							uni.showToast({
								title:'修改成功',
								icon:'success'
							})
							this.clear()
							this.getList()
						}
					}
				}
			})
			
			
		},
		// 3.立即支付
		goPay(TradeNo,money){
			// console.log(TradeNo,money);
			uni.redirectTo({
				url:'../pay/pay?outTradeNo=' + TradeNo + '&totalAmount=' + money
			})
		},
		// 2.私有事件   上拉事件
		reachBottom(){
			// console.log('触底事件');
			this.page++;
			if(this.page <= this.totalPage){
				this.getList()
			}
		},
		// 1.获取订单列表
		getList(){
			this.loadStatus[this.swiperCurrent] = 'loading'
			// 处理全部订单  不需要传参数  3
			// console.log(this.swiperCurrent,this.current);
			let status = this.swiperCurrent>2 ? "":this.swiperCurrent
			
			this.$http({
				url:'orderlist',
				method:'get',
				header:{
					"content-type":"application/json",
					"authorization":uni.getStorageSync('userInfo').token || null
				},
				data:{
					uid:uni.getStorageSync("userInfo").uid,
					size:this.size,
					page:this.page,
					status
				}
			}).then(res => {
				// console.log('获取列表',res);
				if(res.data.code === 200){
					if(res.data.list == null){
						this.dataBuffer = false
						
					}else{
						// 是否是最后一页
						if(this.page < res.data.list.totalPage){
							this.loadStatus[this.swiperCurrent] = 'loadmore'
						}else{
							this.loadStatus[this.swiperCurrent] = 'nomore'
						}
						console.log(res.data.list.data);
						this.totalPage = res.data.list.totalPage
						this.orderList = this.orderList.concat(res.data.list.data)
						this.dataBuffer = true
					}
				}
			})
			
		},
		clear(){
			this.orderList = [],
			this.page = 1
			this.loadStatus = ['loadmore','loadmore','loadmore','loadmore']
		},
		// tab栏切换
		change(index) {
			// console.log(index);
			// 兼容支付宝小程序
			// #ifdef MP-ALIPAY
			this.current = index;
			// #endif
			this.swiperCurrent = index;
			
			this.clear()
			this.getList()
			
		},
		
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			
		}
	}
};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}
	/* #endif */
</style>
<style lang="scss" scoped>
	// 引入样式
	@import '@/static/css/order.scss';
</style>
